<template>
    <div class="production-data-query">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span>生产数据查询</span>
        </div>
        
        <el-form :inline="true" :model="queryForm" label-width="120px" label-position="right">
          <el-form-item label="查询内容类型">
            <el-select v-model="queryForm.queryType" placeholder="请选择查询内容类型">
              <el-option label="PCBA检测" value="pcba"></el-option>
              <el-option label="整表流量台检测" value="wholeFlow"></el-option>
              <el-option label="整表出厂检测" value="wholeOut"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="查询字段">
            <el-select v-model="queryForm.queryField" placeholder="请选择查询字段">
              <el-option label="内条码" value="internalCode"></el-option>
              <el-option label="表号" value="meterNumber"></el-option>
              <el-option label="订单编号+客户名称" value="orderAndCustomer"></el-option>
              <el-option label="IMEI" value="imei"></el-option>
              <el-option label="IMSI" value="imsi"></el-option>
              <el-option label="ICCID" value="iccid"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item v-if="queryForm.queryField === 'internalCode' || queryForm.queryField === 'meterNumber' || queryForm.queryField === 'iccid'" label="单个或号段">
            <el-input v-model="queryForm.rangeValue" placeholder="输入单个值或号段范围"></el-input>
          </el-form-item>
          
          <el-form-item v-if="queryForm.queryField === 'orderAndCustomer'" label="订单编号">
            <el-input v-model="queryForm.orderId" placeholder="请输入订单编号"></el-input>
          </el-form-item>
          
          <el-form-item v-if="queryForm.queryField === 'orderAndCustomer'" label="客户名称">
            <el-input v-model="queryForm.customerName" placeholder="请输入客户名称"></el-input>
          </el-form-item>
          
          <el-form-item v-if="queryForm.queryField === 'imei' || queryForm.queryField === 'imsi'" label="单个值">
            <el-input v-model="queryForm.singleValue" placeholder="请输入单个值"></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
        
        <el-table
          v-if="tableData.length > 0"
          :data="tableData"
          border
          style="width: 100%; margin-top: 20px"
          height="400"
        >
          <el-table-column prop="internalCode" label="内条码"></el-table-column>
          <el-table-column prop="meterNumber" label="表号"></el-table-column>
          <el-table-column prop="orderId" label="订单编号"></el-table-column>
          <el-table-column prop="customerName" label="客户名称"></el-table-column>
          <el-table-column prop="imei" label="IMEI"></el-table-column>
          <el-table-column prop="imsi" label="IMSI"></el-table-column>
          <el-table-column prop="iccid" label="ICCID"></el-table-column>
          <el-table-column prop="testType" label="检测类型"></el-table-column>
          <el-table-column prop="testTime" label="检测时间"></el-table-column>
          <el-table-column prop="testResult" label="检测结果">
            <template slot-scope="scope">
              <el-tag :type="scope.row.testResult === '成功' ? 'success' : 'danger'">
                {{ scope.row.testResult }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        
        <div v-else class="empty-data">
          <el-empty description="暂无数据"></el-empty>
        </div>
        
        <el-pagination
          v-if="total > 0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ProductionDataQuery',
    data() {
      return {
        queryForm: {
          queryType: 'pcba',
          queryField: 'internalCode',
          rangeValue: '',
          orderId: '',
          customerName: '',
          singleValue: '',
          page: 1,
          pageSize: 10
        },
        tableData: [
          {
            internalCode: 'IN1234567890',
            meterNumber: 'M12345678',
            orderId: 'ORDER20230001',
            customerName: '客户A',
            imei: '86250205356565',
            imsi: '460011234567890',
            iccid: '89860014235678901234',
            testType: 'PCBA检测',
            testTime: '2023-11-01 10:30:45',
            testResult: '成功'
          },
          {
            internalCode: 'IN1234567891',
            meterNumber: 'M12345679',
            orderId: 'ORDER20230002',
            customerName: '客户B',
            imei: '86250205356566',
            imsi: '460011234567891',
            iccid: '89860014235678901235',
            testType: '整表流量台检测',
            testTime: '2023-11-01 10:35:45',
            testResult: '失败'
          },
          {
            internalCode: 'IN1234567892',
            meterNumber: 'M12345680',
            orderId: 'ORDER20230003',
            customerName: '客户C',
            imei: '86250205356567',
            imsi: '460011234567892',
            iccid: '89860014235678901236',
            testType: '整表出厂检测',
            testTime: '2023-11-01 10:40:45',
            testResult: '成功'
          }
        ],
        total: 3,
        currentPage: 1,
        pageSize: 10
      };
    },
    methods: {
      handleQuery() {
        // 模拟查询操作，可以根据 queryForm 的值筛选 tableData
        this.currentPage = 1;
        this.filterData();
      },
      resetForm() {
        this.queryForm = {
          queryType: 'pcba',
          queryField: 'internalCode',
          rangeValue: '',
          orderId: '',
          customerName: '',
          singleValue: '',
          page: 1,
          pageSize: 10
        };
        this.fetchData();
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.filterData();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.filterData();
      },
      filterData() {
        // 模拟分页
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        this.tableData = this.fullTableData.slice(start, end);
      },
      fetchData() {
        // 模拟获取数据
        this.fullTableData = [
          {
            internalCode: 'IN1234567890',
            meterNumber: 'M12345678',
            orderId: 'ORDER20230001',
            customerName: '客户A',
            imei: '86250205356565',
            imsi: '460011234567890',
            iccid: '89860014235678901234',
            testType: 'PCBA检测',
            testTime: '2023-11-01 10:30:45',
            testResult: '成功'
          },
          {
            internalCode: 'IN1234567891',
            meterNumber: 'M12345679',
            orderId: 'ORDER20230002',
            customerName: '客户B',
            imei: '86250205356566',
            imsi: '460011234567891',
            iccid: '89860014235678901235',
            testType: '整表流量台检测',
            testTime: '2023-11-01 10:35:45',
            testResult: '失败'
          },
          {
            internalCode: 'IN1234567892',
            meterNumber: 'M12345680',
            orderId: 'ORDER20230003',
            customerName: '客户C',
            imei: '86250205356567',
            imsi: '460011234567892',
            iccid: '89860014235678901236',
            testType: '整表出厂检测',
            testTime: '2023-11-01 10:40:45',
            testResult: '成功'
          }
        ];
        this.total = this.fullTableData.length;
        this.filterData();
      }
    },
    mounted() {
      this.fullTableData = this.tableData;
      this.filterData();
    }
  };
  </script>
  
  <style scoped>
  .production-data-query {
    padding: 20px;
  }
  
  .empty-data {
    text-align: center;
    padding: 60px 0;
  }
  
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
  </style>